<template>
  <div data-v-696acf26="" class="classify-container">
    <div data-v-696acf26="" class="mescroll" style="top: 0px; bottom: 88px">
      <div
        data-v-696acf26=""
        class="classify-search classify-search-fixed"
        style="top: 0px"
      >
        <router-link
          data-v-696acf26=""
          class="search-content"
          to="/search"
          tag="div"
        >
          <span data-v-696acf26="" class="font-px30 color-999"
            >请输入药品、症状、品牌</span
          >
        </router-link>
      </div>

      <div data-v-696acf26="" class="classify-top">
        <router-link to="/FindMeChildTop/00000">
          <div data-v-696acf26="" class="classify-top-title">
            <span
              data-v-696acf26=""
              class="color-333 font-px30 font-weight-bold"
              >分类找药</span
            >
            <i
              data-v-696acf26=""
              class="ydwiconfont iconwode-shezhi-jiantou"
              style="font-size: 28px"
            ></i>
          </div>
        </router-link>
        <ul data-v-696acf26="" class="classify-top-pic">
          <!-- 中西药跳转 -->
          <router-link to="/FindMeChildTop/10000">
            <li data-v-696acf26="">
              <img
                data-v-696acf26=""
                src="../assets/img/zxyp.8dac0b3.png"
                alt="中西药品"
              />
            </li>
          </router-link>

          <!-- 滋补调养 跳转-->
          <router-link to="/FindMeChildTop/10001">
            <li data-v-696acf26="">
              <img
                data-v-696acf26=""
                src="../assets/img/zbty.4ab8a84.png"
                alt="滋补调养"
              />
            </li>
          </router-link>

          <!-- 性福生活跳转 -->
          <router-link to="/FindMeChildTop/10002">
            <li data-v-696acf26="">
              <img
                data-v-696acf26=""
                src="../assets/img/xfsh.1cc67f4.png"
                alt="性福生活"
              />
            </li>
          </router-link>
          <!-- 医疗器械跳转 -->
          <router-link to="/FindMeChildTop/10022">
            <li data-v-696acf26="">
              <img
                data-v-696acf26=""
                src="../assets/img/ylqx.d9e1720.png"
                alt="医疗器械"
              />
            </li>
          </router-link>
          <!-- 中药饮片跳转 -->
          <router-link to="/FindMeChildTop/10044">
            <li data-v-696acf26="">
              <img
                data-v-696acf26=""
                src="../assets/img/zyyp.4c297f6.png"
                alt="中药饮片"
              />
            </li>
          </router-link>
          <!-- 美容护肤跳转 -->
          <router-link to="/FindMeChildTop/10047">
            <li data-v-696acf26="">
              <img
                data-v-696acf26=""
                src="../assets/img/mrhf.34cb9fa.png"
                alt="美容护肤"
              />
            </li>
          </router-link>
        </ul>
      </div>
      <router-link to="/cartsGood">
        <div data-v-696acf26="" class="classify-banner">
          <img
            data-v-696acf26=""
            :src="datalist.imageUrl"
            alt="药兜网"
            style="width: 689px; height: 220px; border-radius: 25px"
          />
        </div>
      </router-link>
      <div data-v-2cc6c2cc="" data-v-696acf26="" class="commom-classify">
        <div data-v-2cc6c2cc="" class="commom-classify-tayle">
          <span data-v-2cc6c2cc="" class="history">常见分类</span>
        </div>
        <div data-v-2cc6c2cc="" class="classify-box">
          <router-link to="/FindMeChildMid/10003">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="儿童用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">儿童用药</div>
            </div>
          </router-link>

          <router-link to="/FindMeChildMid/10004">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="妇科用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">妇科用药</div>
            </div>
          </router-link>

          <router-link to="/FindMeChildMid/10005">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="感冒发烧"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">感冒发烧</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10007">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="咳嗽用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">咳嗽用药</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10013">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="清热解毒"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">清热解毒</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10011">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="男科用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">男科用药</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10012">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="皮肤用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">皮肤用药</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10019">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="肠胃用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">肠胃用药</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10015">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="三高用药"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">三高用药</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10016">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="维生素类"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">维生素类</div>
            </div>
          </router-link>
          <router-link to="/FindMeChildMid/10017">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="眼部护理"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">眼部护理</div>
            </div>
          </router-link>

          <router-link to="/FindMeChildTop/00000">
            <div data-v-2cc6c2cc="" class="classify-item">
              <div data-v-2cc6c2cc="" class="icon-img">
                <img
                  data-v-2cc6c2cc=""
                  src=""
                  alt="更多分类"
                />
              </div>
              <div data-v-2cc6c2cc="" class="icon-title">更多分类</div>
            </div>
          </router-link>
        </div>
      </div>
      <div data-v-696acf26="" class="classify-product">
        <div
          data-v-62ec0f22=""
          data-v-696acf26=""
          id="commodity"
          class="commodity"
        >
          <!---->
          <div data-v-62ec0f22="" class="title">
            <div data-v-62ec0f22="" class="title-left">
              <span data-v-62ec0f22="" class="line-left"></span>
              <span data-v-62ec0f22="" class="otherProduct-img-box"
                ><img
                  data-v-62ec0f22=""
                  src=""
              /></span>
            </div>
            <div data-v-62ec0f22="" class="title-text"></div>
            <div data-v-62ec0f22="" class="title-right">
              <span data-v-62ec0f22="" class="line-left"></span>
            </div>
          </div>
          <div data-v-62ec0f22="" class="commodity_list">
            <div
              data-v-c63fad28=""
              data-v-62ec0f22=""
              class="product-list_item"
              v-for="item in goodsList"
              :key="item.productId"
              @click="linkToDetail(item.productId)"
            >
              <div data-v-c63fad28="" class="product-img">
                <img
                  data-v-c63fad28=""
                  alt="商品图片"
                  :src="item.imageUrl"
                  lazy="loaded"
                />
              </div>
              <div data-v-c63fad28="" class="product-info">
                <div
                  data-v-c63fad28=""
                  class="product-name txt-cut color-333 font-px26"
                >
                  <span data-v-c63fad28="">{{ item.internalName }}</span>
                </div>
                <div data-v-c63fad28="" class="product-store">
                  <span
                    data-v-c63fad28=""
                    class="font-px24 color-999 vertical-middle one-txt-cut"
                    >{{ item.merchantInfo.merchantName }}</span
                  >
                  <img
                    data-v-c63fad28=""
                    src=""
                    alt=""
                    class="vertical-middle"
                  />
                </div>
                <div data-v-c63fad28="" class="product-tag">
                  <div
                    data-v-c63fad28=""
                    class="yskMake"
                    v-if="item.labels.useHealthyCard == 'Y'"
                  >
                    药神卡
                  </div>
                  <!---->
                  <div
                    data-v-c63fad28=""
                    class="quan"
                    v-if="item.labels.quan == 'Y'"
                  >
                    <img
                      data-v-c63fad28=""
                      src="https://images.yaodouwang.com/img/home/tag_coupon.png"
                      alt="券"
                    />
                  </div>
                  <div
                    data-v-c63fad28=""
                    alt="券"
                    class="pt-icon"
                    v-if="item.labels.isGroup == 'Y'"
                  >
                    拼团
                  </div>
                  <!---->
                </div>
                <div data-v-c63fad28="" class="product-price">
                  <div data-v-c63fad28="" class="product-price-left">
                    <div
                      data-v-d4462b7e=""
                      data-v-c63fad28=""
                      class="money_show"
                      fontcolor="#FF7900"
                    >
                      <span data-v-d4462b7e="" class="now_money"
                        ><span data-v-d4462b7e=""
                          ><span data-v-d4462b7e="" class="font-px28">¥</span
                          ><span data-v-d4462b7e="" class="font-px38"
                            >{{ item.price
                            }}<span data-v-d4462b7e="" class="font-px26"
                              >.00</span
                            ></span
                          ></span
                        ></span
                      >
                    </div>
                  </div>
                  <div
                    data-v-cdd5d3c4=""
                    data-v-c63fad28=""
                    class="cart-icon"
                    @click.stop="handleCartAdd(item)"
                  >
                    <img
                      data-v-cdd5d3c4=""
                      src=""
                      alt="加购物车"
                      v-if="item.labels.isGroup != 'Y'"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="mescroll-upwarp mescroll-hardware"
        style="visibility: visible; display: block"
      >
        <p id="downTip" style="color: #999999; font-size: 26px">
          —— 已经到底了 ——
        </p>
      </div>
      <div class="mescroll-upwarp" style="visibility: hidden; display: block">
        <p class="upwarp-progress"></p>
        <p class="upwarp-tip">加载中..</p>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../utils/request.js";
import { cartAdd } from "../api/pjmedicinecard";
import { ownCartList } from "../api/pjmedicinecart";

export default {
  data() {
    return {
      datalist: [],
      goodsList: [],
    };
  },
  created() {
    request({
      url: "/yd/supplier/h5/index/banner/list?typeIds=FIND_DRUGS_BANNER", //中间图片的渲染的接口
      method: "GET",
    }).then((res) => {
      this.datalist = res.data.data; //图片的数据包
    });

    request({
      url: "/yd/mall/productSales?pageIndex=1&pageSize=10&typeId=RECOMMEN_FOR_YOU", //找药首页数据接口
      method: "GET",
    }).then((res) => {
      this.goodsList = res.data.data.products; //渲染首页的的数据包
    });
  },
  methods: {
    linkToDetail(id) {
      this.$router.push("/children/detail/" + id);
    },
    handleCartAdd(good) {
      //商品加入购物车
      if (this.$store.state.zlstore.userinfo) {
        let productObj = {
          cartAddVos: [{ productId: good.productId, quantity: 1 }],
          isBuy: false,
        };
        cartAdd(productObj).then((res) => {
          ownCartList().then((res) => {
            this.$toast.success("加入购物车成功");
            //发起请求购物车里面的商品列表
            let supplierList = res.data.supplierList;
            this.$store.commit("pjcart/initSupplierList", supplierList);
          });
        });
      } else {
        this.$toast.fail("请登录");
      }
    },
  },
};
</script>

<style scoped>
.product-img {
  width: 350px !important;
  height: 350px !important;
  position: relative;
}
</style>